<template>
    <div class="trigger-condition">
        <button type="button" class="btn btn-mini btn-primary add-condition" @click="addCondition()">添加条件</button>
        <table class="table " style="margin-top: 10px;" >
            <tr>
                <th>序号</th>
                <th width="200">字段名</th>
                <th width="250">运算符</th>
                <th width="100">字段值</th>
                <th>操作</th>
            </tr>
            <tbody id="condition-body">
            <tr v-for="(item,i) in data.condition">
                <td valign="center">[{{i+1}}]</td>
                <td>
                    <select v-model="item.field" class="" name="" id="">
                        <option value="">请选择</option>
                        <option :value="vv" v-for="(vv,ii) in fields">{{vv}}</option>
                    </select>
                </td>
                <td>
                    <div class="radio" v-for="(vv) in ops" style="display: inline-block; margin-right: 10px;">
                        <label>
                            <input type="radio" :value="vv" v-model="item.op">
                            {{vv}}
                        </label>
                    </div>
                </td>
                <td>
                    <input type="text" class="input-mini" v-model="item.value">
                </td>
                <td>
                    <button type="button" class="btn btn-mini btn-danger" @click="remove(i)">删除</button>
                </td>
            </tr>
            </tbody>
        </table>

    </div>
</template>
<script>
    var component = {
        props:["data"],
        computed: {
            fields(){
                var cp = fields.concat();
                if(this.data.event == 'EVENT_SAVE' || this.data.event == 'EVENT_GO_NEXT'){
                    cp.unshift('[被改变的字段]');
                    cp.unshift("[被提交的字段]");
                }
                return cp;
            }
        },
        data(){
            return {
                ops: ["等于", "大于", "小于", "大于等于", "小于等于", "不等于", "包含", "不包含"]
            }
        },
        methods:{
            addCondition: function () {
                this.data.condition.push({
                    field: "",
                    op: "等于",
                    value: ""
                })
            },
            remove: function (i) {
                this.data.condition.splice(i, 1);
            },
        }
    };
</script>

<style>
    .trigger-condition .btn-mini{
        padding-top: 4px;
        padding-bottom: 4px;
        padding-left: 5px;
        padding-right: 5px;
        font-size: 12px;
    }
    .trigger-condition .form-control{
        margin-bottom: 10px;
    }
</style>